// 监听 输入电话号码的keyup事件，校验输入的电话号码是否是合法的电话号码
$("#user-phone").on('keyup', function () {
  // 获取用户输入的电话号码
  var phone = $("#user-phone").val();
  // 调用正则校验的工具类验证
  var base = new Base();
  var flag = base.validatePhone(phone);
  if (flag) {
    // 如果合法，修改 user-phone-icon 的属性 xlink:href 的值为 #icon-icon-test1
    $("#user-phone-icon").attr("xlink:href", "#icon-icon-test1");
  } else {
    // 如果不合法，修改 user-phone-icon 的属性 xlink:href 的值为 #icon-icon-test
    $("#user-phone-icon").attr("xlink:href", "#icon-icon-test");
    // 隐藏电话号码的服务器验证信息
    $(".message-phone").css('display', 'none')
  }
  // 修改 icon-phone CSS display = flex
  $(".phone-wrapper .icon-phone").css('display', 'flex');

  if (base.validateIsReg()) {
    $(".btn-wrapper>button").removeClass('layui-btn-disabled');
  } else {
    $(".btn-wrapper>button").addClass('layui-btn-disabled');
  }
});


// 监听密码的校验 同电话号码校验的过程
$("#user-password").on('keyup', function () {
  // 获取用户输入的电话号码
  var password = $("#user-password").val();
  // 调用正则校验的工具类验证
  var base = new Base();
  var flag = base.validatePassword(password);
  if (flag) {
    // 如果合法，修改 user-phone-icon 的属性 xlink:href 的值为 #icon-icon-test1
    $("#user-password-icon").attr("xlink:href", "#icon-icon-test1");
  } else {
    // 如果不合法，修改 user-phone-icon 的属性 xlink:href 的值为 #icon-icon-test
    $("#user-password-icon").attr("xlink:href", "#icon-icon-test");
  }
  // 修改 icon-phone CSS display = flex
  $(".password-wrapper .icon-password").css('display', 'flex');

  if (base.validateIsReg()) {
    $(".btn-wrapper>button").removeClass('layui-btn-disabled');
  } else {
    $(".btn-wrapper>button").addClass('layui-btn-disabled');
  }
});

// 点击事件实现密码显示/不显示明文 show-password
$(".show-password").on('click', function () {
  // 获取当前的显示方式，
  var type = $("#user-password").attr("type");
  if (type === 'password') {
    // 如果是密文就修改 type = text
    $("#user-password").attr("type", 'text');
  } else {
    // 否则修改 type = password
    $("#user-password").attr("type", 'password');
  }
})

// 验证电话号码是否重复,在电话号码的输入框绑定一个光标失去事件
$("#user-phone").on('blur', function () {
  // 验证电话号码是否合法
  // 获取用户输入的电话号码
  var phone = $("#user-phone").val();
  // 调用正则校验的工具类验证
  var base = new Base();
  var flag = base.validatePhone(phone);
  if (!flag) return;
  // 通过ajax请请求调用服务器
  $.ajax({
    url: "/user/findUserByPhone",
    method: "GET",
    data: {"phone": phone},
    dataType: "json",
    success: function (resp) {
      if (resp.data) {
        // 调用号码以注册
        $(".message-phone .text").text("电话号码可用")
      } else {
        // 电话号码可用
        $(".message-phone .text").text("电话号码已注册")
      }
      // 设定提示信息的 显示
      $(".message-phone").css('display', 'flex')
    }
  })
})

